<div
  *ngIf="isVisible"
  class="machine-report-modal"
  [ngClass]="{'opne-animation': isVisible}"
  cdkDrag>
  <div class="modal-head">
    <p class="head-title" cdkDragHandle>
      <!-- <span class="drop-btn">
        <svg width="20px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </span> -->
      验机报告
    </p>
    <span class="modal-del" (click)="isVisible = false">
      <i nz-icon nzType="close" nzTheme="outline"></i>
    </span>
  </div>

  <div class="modal-body">
    <!-- 用户评估 -->
    <div class="modal-body-lf scrollbar-wrap">
      <p class="modal-body-title">
        <i nz-icon nzType="tags" nzTheme="outline" class="m-r-4"></i>用户评估
      </p>

      <ng-container *ngIf="[1, 3].includes(recycleOrder.orderWay); else noneTemplate">
        <dl class="assess-dl">
          <dd>下单机型: <span>{{ recycleOrder.umname || '-' }}</span></dd>
          <dd>评估合计: <span>{{ (recycleOrder?.uprc || 0) + (recycleOrder?.orderAprc || 0) + (recycleOrder?.cprc || 0) }}</span></dd>
        </dl>
  
        <ul class="assess-ul">
          <li *ngFor="let item of assessmentLists; let index = index;">
            <span class="assess-li-q">{{ index + 1 }}、{{ item.cname }}</span>
            <span class="assess-li-a">{{ item.oname }}</span>
          </li>
        </ul>
      </ng-container>
      <ng-template #noneTemplate>{{ recycleOrder.umname || '---' }}</ng-template>
    </div>

    <!-- 前端验机报告 -->
    <div class="modal-body-rt scrollbar-wrap">
      <p class="modal-body-title">
        <i nz-icon nzType="tags" nzTheme="outline" class="m-r-4"></i>前端验机报告
      </p>

      <!-- 机型 -->
      <div class="report-item">
        <dl class="report-item-dl">
          <dt>
            <img
              nz-image
              [nzSrc]="phoneCheck?.modelImg || fallback"
              alt="机型"
            />
          </dt>
          <dd>
            <P class="dd-name">
              {{ phoneCheck?.modelName || '-' }}
              <nz-tag [nzColor]="'blue'" class="m-l-5" *ngIf="phoneCheck?.restype">{{ resultFilter(phoneCheck?.restype) }}</nz-tag>
            </P>
            <span class="dd-time">于{{ phoneCheck?.updateTime || '-' }} 完成验机</span>
          </dd>
        </dl>
      </div>

      <!-- 基础信息 -->
      <div class="report-item">
        <div nz-row>
          <div nz-col nzSpan="8" class="info-li">颜色 <span>{{ phoneCheck?.colour || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">存储容量 <span>{{ phoneCheck?.store || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">购买渠道 <span>{{ payChannelFilter() }}</span></div>
          <div nz-col nzSpan="8" class="info-li">网络制式 <span>{{ phoneCheck?.net || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">IMEI <span>{{ phoneCheck?.imel || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">序列号 <span>{{ phoneCheck?.phoneSerialNumber || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">保修截止时间 <span>{{ phoneCheck?.guaranteeTime ? (phoneCheck?.guaranteeTime | date: 'yyyy-MM-dd') : '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">电池健康值 <span>{{ phoneCheck?.batteryHealth || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">充电次数 <span>{{ phoneCheck?.chargeCount || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">B端成色 <span>{{ phoneCheck?.colourNameB || '-' }}</span></div>
          <div nz-col nzSpan="8" class="info-li">C端成色 <span>{{ phoneCheck?.colourName || '-' }}</span></div>
        </div>
      </div>

      <!-- 图片 -->
      <div class="report-item">
        <div class="report-imgs">
          <p class="report-img-title">验机图片 ({{ testImageLists?.length }}张)</p>
          <nz-image-group class="img-wrap">
            <div class="img-item" *ngFor="let img of testImageLists">
              <img nz-image width="64px" [nzSrc]="img" alt="验机图片" />
            </div>

            <div class="img-item" *ngIf="phoneCheck?.asImg">
              <img nz-image width="64px" [nzSrc]="phoneCheck?.asImg" alt="验机截图" />
            </div>
          </nz-image-group>
        </div>
      </div>

      <!-- 验机说明 -->
      <div class="report-item" *ngIf="phoneCheck?.checkExplain">
        <div class="report-imgs">
          <p class="report-img-title">验机说明</p>
          <div class="explain-content">{{ phoneCheck?.checkExplain }}</div>
        </div>
      </div>

      <!-- 检测信息 -->
      <div class="report-item">
        <div class="testing-item" *ngFor="let item of testTermLists">
          <p class="testing-title">
            {{ item?.title }} ({{ item?.total }}项，
            {{ item?.exception ? "其中" + item?.exception + "项异常" : "无异常" }})
          </p>

          <ul class="testing-ul">
            <li *ngFor="let child of item.children" [ngClass]="{'red-bg': child.type}">
              <span class="testing-li-q">
                <i nz-icon [nzType]="child?.type ? 'exclamation-circle' : 'check-circle'" nzTheme="outline" class="li-q-icon m-r-8" [ngClass]="{'icon-red': child.type}"></i>
                {{ child?.text }}: <span style="color: #909399;">{{ child.answer }}</span>
              </span>
              <span *ngIf="child?.imgList?.length" class="testing-li-i" title="查看图片" (click)="previewImgs(child.imgList)">
                <img class="small-img" [src]="child.imgList[0]" />
                <i nz-icon nzType="zoom-in" nzTheme="outline" class="show-ico"></i>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-foot">
    <strong class="p-r-5">验机师备注:</strong>{{ checkNote }}
  </div>
</div>

<!-- mask -->
<ng-container *ngIf="isMask">
  <div *ngIf="isVisible" class="modal-mask-wrap" (click)="isVisible = false"></div>
</ng-container>